<template>
	<view class="userInfo">
		<view class="userInfoMsg">
			<view class="InfoItem">
				<view class="label">昵称</view>
				<view class="nickname">{{store.nickname}}</view>
			</view>
			<view class="InfoItem">
				<view class="label">年龄</view>
				<view class="age">{{store.age}}</view>
			</view>
			<view class="InfoItem">
				<view class="label">性别</view>
				<view class="sex">{{sex}}</view>
			</view>
			<view class="InfoItem">
				<view class="label">地区</view>
				<view class="city">{{store.city}}</view>
			</view>
			<view class="InfoItem">
				<view class="label">手机号</view>
				<view class="phone">{{store.phone}}</view>
			</view>
			<view class="InfoItem">
				<view class="label">邮箱</view>
				<view class="email">{{store.email}}</view>
			</view>
			<up-button class="changeUserInfo" text="完善信息" color="#000033" type="primary"
				shape='circle' @click="store.openPopup()"></up-button>
			<up-popup v-model:show="store.popupShow" mode="center" closeIconPos="top-right" round=10 :closeable="true"
			:closeOnClickOverlay="false">
				<view class="popup">
					<up-form :rules="rules" class="userInfoForm" :model="store.form" errorType="message" ref="userInfoFormRef" >
						<up-form-item
								label="昵称"
								prop="nickname"
								borderBottom="true"
								ref="item1"
								label-width="60px"
						>
							<up-input
									v-model="store.form.nickname"
									border="none"
									placeholder="请输入昵称"
									clearable
							></up-input>
						</up-form-item>
						<up-form-item
								label="年龄"
								prop="age"
								borderBottom="true"
								ref="item2"
								label-width="60px"
						>
							<up-input
									v-model="store.form.age"
									border="none"
									placeholder="请输入年龄"
									clearable
							></up-input>
						</up-form-item>
						<up-form-item
						        label="性别"
								prop="sex"
								borderBottom="true"
								ref="item3"
								label-width="60px"
						>
						  <up-radio-group
							v-model="store.form.sex"
							placement="row"
						  >
							<up-radio
							  label="男"
							  name=true
							>
							</up-radio>
							<up-radio
							  label="女"
							  name=false
							>
							</up-radio>
						  </up-radio-group>
						</up-form-item>
						<up-form-item
						            label="地区"
									prop="city"
									borderBottom="true"
									ref="item3"
									label-width="60px"
							>
								<up-input
										v-model="store.form.city"
										border="none"
										placeholder="请输入所在城市"
										clearable
								></up-input>
						</up-form-item>
						<up-form-item
						            label="手机号"
									prop="phone"
									borderBottom="true"
									ref="item3"
									label-width="60px"
							>
								<up-input
										v-model="store.form.phone"
										border="none"
										placeholder="请输入手机号"
										clearable
								></up-input>
						</up-form-item>
						<up-form-item
									label="邮箱"
									prop="email"
									borderBottom="true"
									ref="item3"
									label-width="60px"
							>
								<up-input
										v-model="store.form.email"
										border="none"
										placeholder="请输入邮箱"
										clearable
								></up-input>
						</up-form-item>
					</up-form>
					<up-button class="InfoSubmit" type="primary" text="提交" color='#000033' @click="submit()"></up-button>
				</view>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive, computed, onMounted } from 'vue';
import useUserInfoStore from '../../store/userInfo';
const store=useUserInfoStore()
const userInfoFormRef=ref()
onMounted(()=>{
	store.getUserInfo()
})
const sex=computed(()=>{
	if(store.sex===false){
		return '女'
	}else if(store.sex===true){
		return '男'
	}else{
		return store.sex
	}
})
const submit=()=>{
	  userInfoFormRef.value.validate().then(valid => {  
	    if (valid) {  
			store.changeUserInfo()
	    } else {  
	      uni.$u.toast('校验失败')
	    }  
	  }).catch(() => {  
	});  
}

const rules=reactive({
	phone:{
			type: 'number',
			required: false,
			min:11,
			max:11,
			message: '请输入正确的手机号格式',
			trigger: ['blur']
		},
	email:{
		type: 'email',
		required: false,
		message: '请输入正确的邮箱格式',
		trigger: ['blur']
	},

})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.userInfo{
 	display: flex;
 	width: 750rpx;
 	height: 100%;
 	margin: 0 auto;
 	background-color: #F7F7F7;
 	box-sizing: border-box;
}
.userInfoMsg{
 	width:650rpx;
 	flex:1;
 	background-color: white;
 	margin-left: 30rpx;
 	margin-right: 30rpx;
 	margin-top: 30rpx;
 	border-radius: 30rpx;
 	padding: 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
}
.InfoItem{
	height: 100rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	align-items: center;
	font-size: 24rpx;
}
.label{
	width: 240rpx;
	color: #7b7b7b;
}
.changeUserInfo,.InfoSubmit,.userInfoForm{
	margin-top: 50rpx;
}
.popup{
	width: 650rpx;
	height: 800rpx;
	padding: 20rpx 50rpx 20rpx 50rpx;
	box-sizing: border-box;
}
</style>
